<template>
  <div>
    <CommonHead></CommonHead>
    <div class="designer-page-top">
      <div class="con clearfix">
        <div class="sculpture-le clearfix fl">
          <div class="fl sculpture-img">
            <img :src="imgUrl" alt="" />
            <div>
              <p class="surname">{{ userInfo.name }}</p>
              <p class="name-position">{{ userInfo.livenow }} | {{ userInfo.profession }} <span>
                  IP属地：{{ userInfo.livenow }}</span></p>
            </div>
          </div>
          <div class="fl overall-btn">
            <a :class="[isFocus ? 'active1' : '', 'storp-a']" @click="handleFocus"><i class="iconfont icon-shoucang"></i>
              {{ isFocus ? '取消关注' : '关注' }}</a>
            <a href="" class="pr"><i class="iconfont icon-youxiang"></i> 联系我

              <div class="pa contact-me-box">
                Tel: {{ userInfo.mobile }}
                <br />E-mail: {{ userInfo.email }}
              </div>
            </a>
          </div>
        </div>
        <div class="fr sculpture-re">
          <ul class="comment-ul clearfix">
            <li>
              <p>{{ userInfo.project_sum_comment_num }}</p>
              <p>评论</p>
            </li>
            <li>
              <p>{{ userInfo.fans_num }}</p>
              <p>粉丝</p>
            </li>
            <li>
              <p>{{ userInfo.project_sum_zan_num }}</p>
              <p>获赞</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="designer-page-bot">
      <div class="con">
        <div class="dressing-tops clearfix">
          <div class="fl dressing-a">
            <a href="" class="active"> 创作 </a>
            <a href="/collect"> 收藏 </a>
            <a href=""> 推荐 </a>
            <a href=""> 动态 </a>
            <a href=""> 资料</a>
          </div>
          <div class="fr late-a">
            <a>最新上传的 <i class="iconfont icon-jiantou-bottom"></i></a>
          </div>
        </div>
        <div class="designer-list">
          <div class="row">
            <div class="col-lg-4 col-sm-6" v-for="item in designerListArr" :key="item.id">
              <div class="case-div">
                <div class="case-img pr">
                  <!-- 图片 -->
                  <a href="/designerdetails">
                    <img :src="imgPath + item.image" alt="" class="w100" />
                  </a>
                  <div class="give-box pa">
                    <a href="javascript:;" class="give-a">
                      <i class="iconfont icon-dianzan_kuai"></i>
                    </a>
                    <a href="javascript:;" class="collect-a">
                      <i class="iconfont icon-shoucang"></i>
                    </a>
                  </div>
                </div>
                <div class="case-bot">
                  <p class="case-title">
                    <a href="/designerdetails">{{ item.title }}</a>
                  </p>
                  <p class="case-bq">版权登记号：{{ item.copyright_info }}</p>
                  <div class="case-website">
                    <a v-for="(item, index) in item.type_name" :key="index">{{ item }}</a>
                  </div>
                  <div class="sculpture-box clearfix pr">
                    <div class="sculpture fl">
                      <a href="" @mouseover="hover = true" @mouseleave="hover = false">
                        <!-- 头像 -->
                        <img :src="imgUrl" alt="" class="w100" />
                        {{ userInfo.name }}
                      </a>
                      <div class="sculpture-hover pa">
                        <div class="sculpture-top clearfix">
                          <div class="fl sculpture-left">
                            <img alt="" :src="imgUrl" />
                            <div>
                              <p class="surname">{{ userInfo.name }}</p>
                              <p class="name-position">{{ userInfo.profession }}</p>
                            </div>
                          </div>
                          <div class="fr hire-me overall-btn">
                            <a>雇用我</a>
                          </div>
                        </div>
                        <ul class="sculpture-works-ul clearfix">
                          <li v-for="child in item.images.split(',')" :key="child.id">
                            <a href="">
                              <img :src="imgPath + child" alt="" />
                            </a>
                          </li>
                          <!-- <li>
                            <a href="">
                              <img src="@/assets/img/3.jpg" alt="" />
                            </a>
                          </li>
                          <li>
                            <a href="">
                              <img src="@/assets/img/4.jpg" alt="" />
                            </a>
                          </li> -->
                        </ul>
                      </div>
                    </div>
                    <div class="fr collect">
                      <span class="collect-span"> <i class="iconfont icon-shoucang"></i> {{ item.collect_num }} </span>
                      &nbsp;&nbsp;<span class="glance-span">
                        <i class="iconfont icon-liulan"></i> {{ item.view_num }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <FootCopyright></FootCopyright>
    <!-- 弹出雇用我 -->

    <div class="hire-me-box" v-show="isActive">
      <div class="overall-btn">
        <a href=""><i class="iconfont icon-youxiang"></i> 雇用我</a>
      </div>
      <p class="p1">Tel: {{ userInfo.mobile }} <br />E-mail: {{ userInfo.email }}</p>

      <div class="pa tou-img1">
        <img :src="imgUrl" alt="" class="w100" />
      </div>
      <div class="pa colse" @click="clickhide()">
        <i class="iconfont icon-guanbi"></i>
      </div>
    </div>
  </div>
</template>
<script>

import * as api from "@/api/users"


export default {
  data() {
    return {
      isActive: true,
      // 图片网址
      imgPath: 'https://ui-mall.oss-accelerate.aliyuncs.com/',
      // 图片路径
      imgName: "",

      // 用户信息
      userInfo: "",

      // 设计师列表
      designerListArr: '',

      isFocus: false,

      status: "",

    }
  },
  created() {
    this.getDesignerDetail(this.$route.query.id)
  },

  watch: {
    isFocus(newval, oldval) {
      // console.log(newval);

    }
  },


  methods: {
    // 获取设计师列表详情
    async getDesignerDetail(id) {
      try {
        let res = await api.designerDetailApi(id)
        console.log(res, '详情');
        this.userInfo = res.data.data
        // console.log(this.userInfo.is_focus)
        this.imgName = res.data.data.avatar

        this.designerListArr = res.data.data.project
        // console.log(this.designerListArr,'123');

        this.status = res.data.data.is_focus
        console.log(this.status);
        if (this.status === 1) {
          this.isFocus = true
        }

      } catch (e) {
        console.log(e);
      }
    },




    handleFocus() {
      this.isFocus = !this.isFocus
  

      // 关注/取消关注接口
      api.focusApi(this.$route.query.id)
        .then(res => {
          console.log(res, '关注');
        })
        .catch((e => {
          console.log(e);
        }))


    },



    async clickhide() {
      this.isActive = false
    }
  },
  computed: {
    imgUrl() {
      return this.imgPath + this.imgName
    }
  }
}
</script>
<style lang="less" scoped>
.storp-a {
  text-decoration: none;
  cursor: pointer;
}
</style>